<script setup lang="ts">
import { ref } from 'vue'
import { getAssetsImge } from '/@/utils/getImge'

const article = ref({
  title: '2024 最新高质量 - 医学影像数据集',
  author: '数据猎手小k',
  publishTime: '2024-09-25 15:40:47',
  views: '1.9k',
  collections: 24,
  likes: 29,
  tags: ['人工智能'],
  community: {
    name: '开放原子开发者工作坊',
    status: '文章已被社区收录',
    logo: getAssetsImge('community-logo.png')
  }
})

const articleContent = ref({
  introduction: '医学影像数据集对于推动医学影像分析技术的发展、提高医疗服务质量、加速疾病诊断和治疗研究具有重要作用。',
  sections: [
    {
      title: '医学影像数据集对于大模型的意义主要体现在以下几个方面：',
      points: [
        {
          title: '1、提升诊断准确性：',
          content: '通过训练，大模型可以学习医学影像数据集中的模式和特征，从而提高对疾病的识别和诊断准确性。'
        },
        {
          title: '2、辅助决策：',
          content: '大模型能够分析和解读医学影像，辅助医生进行更全面的诊断和治疗决策。'
        },
        {
          title: '5、多模态学习：',
          content: '结合不同类型的医学影像数据，提升模型的综合分析能力。'
        }
      ]
    }
  ]
})

// 评论数据
const comments = ref([
  {
    id: 1,
    author: '编程导航_小y',
    avatar: getAssetsImge('avatar/user1.jpg'),
    content: '我正在参与编程导航 2024 年度总结活动，写总结赢 Cherry 机械键盘，冲！',
    time: '今天14:33',
    likes: 1,
    isVip: true,
    replies: [
      {
        id: 11,
        author: '鱼皮',
        avatar: getAssetsImge('avatar/user2.jpg'),
        content: '加油！看好你',
        time: '今天14:35',
        likes: 0
      }
    ]
  }
])

// 推荐内容
const recommendations = ref([
  {
    id: 1,
    title: 'Day 1',
    views: 0,
    isNew: true
  },
  {
    id: 2,
    title: '《你不知道的 JAVA》博客系列 🎯',
    views: 2,
    isHot: true
  },
  {
    id: 3,
    title: '今天学习第二天，路随远，行则将至。',
    views: 1
  },
  {
    id: 4,
    title: '长沙双非一本，目前大三。想在长...',
    views: 12
  },
  {
    id: 5,
    title: '为什么打开狮驼放松器看视频的时...',
    views: 4
  }
])

// 处理评论提交
const commentInput = ref('')
const handleComment = () => {
  if (!commentInput.value.trim()) return
  // 处理评论提交逻辑
  commentInput.value = ''
}

// 获取到路由上的文章id
const articleId = ref(1)

const handleArticle = () => {
  // 处理文章逻辑
}
</script>

<template>
  <div class="article-container">
    <!-- 添加评论区和推荐内容 -->
    <div class="content-wrapper">
      <!-- 左侧推荐区 -->
      <aside class="sidebar">
        <div class="recommendations">
          <h3 class="sidebar-title">内容推荐</h3>
          <div class="recommendations-list">
            <div v-for="item in recommendations"
                 :key="item.id"
                 class="recommendation-item"
            >
              <div class="recommendation-content">
                <h4 class="recommendation-title">
                  {{ item.title }}
                  <span v-if="item.isNew" class="new-badge">新</span>
                  <span v-if="item.isHot" class="hot-badge">热</span>
                </h4>
                <div class="recommendation-meta">
                  <span class="views">
                    <i class="fa fa-clock"></i>
                    {{ item.views }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </aside>

      <!-- 中间主内容区 -->
      <div class="main-content">
        <!-- 文章头部 -->
        <div class="article-header">
          <h1 class="article-title">{{ article.title }}</h1>
          
          <div class="article-info">
            <div class="article-meta">
              <span class="article-tag">原创</span>
              <span class="article-author">{{ article.author }}</span>
              <span class="article-time">
                <i class="fa fa-clock"></i>
                {{ article.publishTime }}
              </span>
              <span class="article-views">
                <i class="fa fa-eye"></i>
                阅读量{{ article.views }}
              </span>
              <span class="article-collections">
                <i class="fa fa-star"></i>
                收藏 {{ article.collections }}
              </span>
              <span class="article-likes">
                <i class="fa fa-thumbs-up"></i>
                点赞数 {{ article.likes }}
              </span>
            </div>

            <div class="article-category">
              <span class="category-label">分类专栏：</span>
              <span v-for="tag in article.tags" :key="tag" class="tag">
                {{ tag }}
              </span>
            </div>
          </div>
        </div>

        <!-- 文章内容 -->
        <div class="article-content">
          <!-- 引言 -->
          <div class="article-intro">
            <span class="highlight-text">医学影像</span>
            <span class="search-icon">🔍</span>
            {{ articleContent.introduction }}
          </div>

          <!-- 文章章节 -->
          <div v-for="(section, index) in articleContent.sections"
               :key="index"
               class="article-section">
            <h2>{{ section.title }}</h2>
            <div v-for="point in section.points"
                 :key="point.title"
                 class="section-point">
              <h3>{{ point.title }}</h3>
              <p>{{ point.content }}</p>
            </div>
          </div>
        </div>

        <!-- 评论区 -->
        <div class="comments-section">
          <div class="comments-header">
            <h3>评论</h3>
            <div class="comment-input-area">
              <input
                type="text"
                v-model="commentInput"
                placeholder="快来和大家讨论吧~"
                @keyup.enter="handleComment"
              />
              <div class="comment-tools">
                <button class="tool-btn">
                  <i class="fa fa-smile"></i>
                  表情
                </button>
                <button class="tool-btn">
                  <i class="fa fa-image"></i>
                  图片
                </button>
                <button class="tool-btn">
                  <i class="fa fa-at"></i>
                  切换
                </button>
              </div>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comments-list">
            <div v-for="comment in comments" :key="comment.id" class="comment-item">
              <div class="comment-main">
                <img :src="comment.avatar" :alt="comment.author" class="comment-avatar">
                <div class="comment-content">
                  <div class="comment-header">
                    <span class="comment-author">{{ comment.author }}</span>
                    <span v-if="comment.isVip" class="vip-badge">VIP</span>
                    <span class="comment-time">{{ comment.time }}</span>
                  </div>
                  <p class="comment-text">{{ comment.content }}</p>
                  <div class="comment-actions">
                    <button class="action-btn">
                      <i class="fa fa-thumbs-up"></i>
                      {{ comment.likes }}
                    </button>
                    <button class="action-btn">
                      <i class="fa fa-comment"></i>
                      回复
                    </button>
                  </div>
                </div>
              </div>

              <!-- 回复列表 -->
              <div v-if="comment.replies" class="replies-list">
                <div v-for="reply in comment.replies"
                     :key="reply.id"
                     class="reply-item"
                >
                  <img :src="reply.avatar" :alt="reply.author" class="reply-avatar">
                  <div class="reply-content">
                    <div class="reply-header">
                      <span class="reply-author">{{ reply.author }}</span>
                      <span class="reply-time">{{ reply.time }}</span>
                    </div>
                    <p class="reply-text">{{ reply.content }}</p>
                    <div class="reply-actions">
                      <button class="action-btn">
                        <i class="fa fa-thumbs-up"></i>
                        {{ reply.likes }}
                      </button>
                      <button class="action-btn">
                        <i class="fa fa-comment"></i>
                        回复
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧目录区 -->
      <aside class="sidebar">
        <div class="table-of-contents">
          <h3 class="sidebar-title">目录</h3>
          <div class="toc-list">
            <div class="toc-item">
              <a href="#introduction">引言</a>
            </div>
            <div v-for="(section, index) in articleContent.sections"
                 :key="index"
                 class="toc-item">
              <a :href="'#section-' + index">{{ section.title }}</a>
              <div v-for="(point, pointIndex) in section.points"
                   :key="pointIndex"
                   class="toc-subitem">
                <a :href="'#point-' + index + '-' + pointIndex">{{ point.title }}</a>
              </div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<style scoped>
.article-container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
}

.content-wrapper {
  display: grid;
  grid-template-columns: 300px minmax(700px, 1fr) 300px;
  gap: 20px;
}

.article-header {
  margin-bottom: 30px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
}

.article-title {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.4;
}

.article-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #666;
  font-size: 14px;
}

.article-tag {
  background-color: #ff7875;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.article-meta i {
  margin-right: 4px;
}

.article-copyright {
  color: #1890ff;
  cursor: pointer;
}

.article-author {
  font-size: 14px;
  color: #666;
}

.article-time {
  font-size: 14px;
  color: #999;
}

.article-views {
  font-size: 14px;
  color: #666;
}

.article-collections {
  font-size: 14px;
  color: #666;
}

.article-likes {
  font-size: 14px;
  color: #666;
}

.article-category {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
}

.category-label {
  color: #333;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  background-color: #f0f2f5;
  color: #1890ff;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.tag:hover {
  background-color: #e6f7ff;
}

.main-content {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.article-intro {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 32px;
  position: relative;
}

.highlight-text {
  color: #ff7875;
  font-weight: 500;
}

.search-icon {
  margin: 0 4px;
}

.article-section {
  margin-bottom: 32px;
}

.article-section h2 {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
}

.section-point {
  margin-bottom: 24px;
}

.section-point h3 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.section-point p {
  color: #666;
  margin: 0;
}

.comments-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.comments-header h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 500;
}

.comment-input-area {
  margin-bottom: 24px;
}

.comment-input-area input {
  width: 100%;
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 8px;
}

.comment-tools {
  display: flex;
  gap: 12px;
}

.tool-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
}

.tool-btn:hover {
  color: #1890ff;
}

.comment-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.comment-main {
  display: flex;
  gap: 12px;
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.comment-content {
  flex: 1;
}

.comment-header {
  margin-bottom: 4px;
}

.comment-author {
  font-weight: 500;
  margin-right: 8px;
}

.comment-time {
  color: #999;
  font-size: 12px;
}

.comment-text {
  margin: 8px 0;
  line-height: 1.6;
}

.comment-actions {
  display: flex;
  gap: 16px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  font-size: 13px;
}

.action-btn:hover {
  color: #1890ff;
}

.replies-list {
  margin-left: 52px;
  margin-top: 12px;
}

.reply-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}

.reply-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.reply-content {
  flex: 1;
}

.reply-header {
  margin-bottom: 4px;
}

.reply-author {
  font-weight: 500;
  margin-right: 8px;
}

.reply-time {
  color: #999;
  font-size: 12px;
}

.reply-text {
  margin: 4px 0;
  line-height: 1.6;
}

.sidebar {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  height: fit-content;
}

.sidebar-title {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 16px 0;
}

.recommendation-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.recommendation-title {
  font-size: 14px;
  font-weight: normal;
  margin: 0 0 4px 0;
  line-height: 1.5;
}

.new-badge,
.hot-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  margin-left: 8px;
}

.new-badge {
  background-color: #e6f7ff;
  color: #1890ff;
}

.hot-badge {
  background-color: #fff2e8;
  color: #fa541c;
}

.recommendation-meta {
  font-size: 12px;
  color: #999;
}

.views {
  display: flex;
  align-items: center;
  gap: 4px;
}

.table-of-contents {
  position: sticky;
  top: 20px;
}

.toc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toc-item {
  padding: 8px 0;
}

.toc-item a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.3s;
}

.toc-item a:hover {
  color: #1890ff;
}

.toc-subitem {
  padding: 4px 0 4px 16px;
}

.toc-subitem a {
  color: #666;
  font-size: 13px;
  font-weight: normal;
}

.toc-subitem a:hover {
  color: #1890ff;
}

@media (max-width: 1400px) {
  .content-wrapper {
    grid-template-columns: 250px minmax(600px, 1fr) 250px;
  }
}

@media (max-width: 1200px) {
  .content-wrapper {
    grid-template-columns: 220px minmax(500px, 1fr) 220px;
  }
}

@media (max-width: 992px) {
  .content-wrapper {
    grid-template-columns: minmax(500px, 1fr) 220px;
  }
  
  .sidebar:first-child {
    display: none;
  }
}

@media (max-width: 768px) {
  .content-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sidebar {
    display: none;
  }

  .article-title {
    font-size: 24px;
  }

  .article-meta {
    flex-wrap: wrap;
    gap: 8px;
  }

  .article-category {
    flex-wrap: wrap;
  }

  .main-content {
    padding: 16px;
  }
}
</style>
